<template>
  <div class="app-container">
    <!--过滤容器开始-->
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>

        <el-button
          style="float:right"
          icon="el-icon-search"
          type="primary"
          @click="handleCurrentChange(1)"
          size="mini">
          查询搜索
        </el-button>

        <el-button
          style="float:right;margin-right: 15px"
          @click="handleResetSearch()"
          size="small">
          重置
        </el-button>

        <el-popconfirm title="确定同意该公司的注册吗？" @confirm="handleCheckPass()">
          <el-button
            type="success"
            icon="el-icon-check"
            slot="reference"
            style="float:right;margin-right:15px"
            :disabled="delBtnStatus"
            size="mini">
            审核通过
          </el-button>
        </el-popconfirm>

        <el-popconfirm title="确定对该公司的注册驳回吗？" @confirm="handleCheckRefuse()">
          <el-button
            type="danger"
            slot="reference"
            icon="el-icon-close"
            style="float:right;margin-right:15px"
            :disabled="delBtnStatus"
            size="mini">
            审核不通过
          </el-button>
        </el-popconfirm>

      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true">
          <el-form-item label="公司名/公司负责人/公司电话" prop="name" label-width="200px">
            <el-input
              v-model="pagination.queryParams.queryString"
              clearable>
            </el-input>
          </el-form-item>

          <el-form-item label="公司审批情况" prop="name" label-width="100px">
            <el-select v-model="pagination.queryParams.status" placeholder="公司审批情况">
              <el-option label="待审核" :value="0"></el-option>
              <el-option label="不通过" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!--过滤容器结束-->


    <div class="table-container">
    <!--展示表格-->
    <el-table
      height="560"
      ref="multipleTable"
      :data="dataList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection"
        width="55">
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="简述">
              <span>{{ props.row.description }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="公司名"
        prop="name"
        width="170">
      </el-table-column>
      <el-table-column
        label="logo"
        width="60">
        <template slot-scope="scope">
          <el-avatar size="small" :src="scope.row.logo"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        label="负责人联系方式"
        prop="telephone"
        width="170">
      </el-table-column>
      <el-table-column
        label="负责人"
        prop="contact"
        width="170">
      </el-table-column>
      <el-table-column
        label="公司类型"
        prop="type"
        width="170">
      </el-table-column>
      <el-table-column
        label="公司规模"
        prop="size"
        width="170">
      </el-table-column>
      <el-table-column
        label="公司账号"
        prop="account"
        width="170">
      </el-table-column>
      <el-table-column
        label="邮箱"
        prop="email"
        width="170">
      </el-table-column>
      <el-table-column
        label="地址"
        prop="addr"
        width="170">
      </el-table-column>
      <el-table-column
        prop="status"
        label="审核状态">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.status === 0" type="info">待审核</el-tag>
          <el-tag size="small" v-else-if="scope.row.status === 1" type="success">通过</el-tag>
          <el-tag size="small" v-else-if="scope.row.status === 2" type="danger">未通过</el-tag>
        </template>

      </el-table-column>
      <el-table-column
        prop="emailStatus"
        label="邮件发送">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.emailStatus === 0" type="info">未发送</el-tag>
          <el-tag size="small" v-else-if="scope.row.emailStatus === 1" type="success">已发送</el-tag>
        </template>

      </el-table-column>
      <el-table-column
        prop="icon"
        width="260px"
        label="操作">
        <template slot-scope="scope">
          <template>
            <el-button type="primary" icon="el-icon-view"  size="mini" slot="reference" @click="handleSeeDetail(scope.row)">详情</el-button>
          </template>

        </template>
      </el-table-column>
    </el-table>
    <!--展示表格-->
    </div>

    <div class="pagination-container">
    <!--分页组件-->
    <el-pagination
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      :page-sizes="[10, 20, 50, 100]"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout="total,sizes, prev, pager, next, jumper">
    </el-pagination>
    <!--分页组件-->
    </div>

    <!--新增企业对话框-->
    <el-dialog
      title="新增企业对话框"
      :visible.sync="dialogFormVisible"
      width="600px"
      :before-close="handleAddFormClose">

      <el-form :model="formData" :rules="rule" ref="dataAddForm">
        <el-form-item label="公司名称" prop="name" label-width="100px">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司账号"  prop="account" label-width="100px">
          <el-input v-model="formData.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司负责人"  prop="contact" label-width="100px">
          <el-input v-model="formData.contact" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司电话"  prop="telephone" label-width="100px">
          <el-input v-model="formData.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司邮件"  prop="email" label-width="100px">
          <el-input v-model="formData.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司地址"  prop="addr" label-width="100px">
          <el-input v-model="formData.addr" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司网址"  prop="url" label-width="100px">
          <el-input v-model="formData.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司规模"  prop="size" label-width="100px">
          <el-input v-model="formData.size" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司类型"  prop="type" label-width="100px">
          <el-input v-model="formData.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司logo"  prop="logo" label-width="100px">
          <el-input v-model="formData.logo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司简述" prop="description" label-width="100px">
          <el-input type="textarea" v-model="formData.description"></el-input>
        </el-form-item>
        <el-form-item label="状态"  prop="status" label-width="100px">
          <el-radio-group v-model="formData.statu">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">正常</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="公司创建时间">
          <div class="block">
            <el-date-picker
              v-model="formData.created"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleAddFormClose()">取 消</el-button>
        <el-button type="primary" @click="handleAdd('dataAddForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增企业对话框-->

    <!--查看公司详情对话框-->
    <el-dialog

      title="查看公司详情对话框"
      :visible.sync="dialogFormVisible4Detail"
      width="800px"
      height="800px"
      :before-close="handleDetailFormClose">
      <el-descriptions title="企业信息">
        <el-descriptions-item label="公司名称">{{formData.name}}</el-descriptions-item>
        <el-descriptions-item label="公司账号">{{formData.account}}</el-descriptions-item>
        <el-descriptions-item label="公司负责人">{{formData.contact}}</el-descriptions-item>
        <el-descriptions-item label="公司地址">{{formData.addr}}</el-descriptions-item>
        <el-descriptions-item label="公司网址">{{formData.url}}</el-descriptions-item>
        <el-descriptions-item label="公司规模">{{formData.size}}</el-descriptions-item>
        <el-descriptions-item label="公司类型">{{formData.type}}</el-descriptions-item>
        <el-descriptions-item label="公司logo">
          <el-avatar size="small" :src="formData.logo"></el-avatar>
        </el-descriptions-item>
        <el-descriptions-item label="公司创建时间">
          <template>{{formData.created | formatDateTime}}</template>
        </el-descriptions-item>
        <el-descriptions-item label="审批状态">
          <el-tag size="small" v-if="formData.status === 0" type="info">待审核</el-tag>
          <el-tag size="small" v-else-if="formData.status === 1" type="success">审核通过</el-tag>
          <el-tag size="small" v-else-if="formData.status === 2" type="danger">审核未通过</el-tag>
        </el-descriptions-item>
      </el-descriptions>


    </el-dialog>
    <!--查看公司企业对话框-->
  </div>
</template>

<script>
import {save,deleteCompany,findById,findByPage,deleteByBatch,checkPass,checkRefuse} from '@/api/company';
import {formatDate} from '@/utils/date';

//分页数据模型
const defaultPagination = {
  currentPage: 1,
  pageSize:10,
  total:0,
  queryParams:{
    name:null,
    companyId:null
  }
};

//默认的表单
const defaultCompany = {
  id: null,
  name: null,
  account: null,
  contact: null,
  telephone:null,
  email: null,
  addr: null,
  url: null,
  size: null,
  type: null,
  logo: null,
  description: null,
  status: null,
  created: null
};


export default {
  name: "index",
  data() {
    return {
      pagination: Object.assign({}, defaultPagination),//分页模型
      dataList: [],//当前页要展示的分页列表数据
      formData: Object.assign({}, defaultCompany),//表单数据
      roleFormData: {}, //角色表单数据
      dialogFormVisible: false,//增加表单是否可见
      dialogFormVisible4Detail:false,//详情表单是否可见
      delBtnStatus:true,
      multipleSelection: [], //选中项数据的数组
      rule: {
        name: [{required: true, message: '请输入公司名称', trigger: 'blur'}],
        account: [{required: true, message: '请输入公司账号', trigger: 'blur'}],
        contact: [{required: true, message: '请输入公司负责人姓名', trigger: 'blur'}],
        telephone: [{required: true, message: '请输入公司联系电话', trigger: 'blur'}],
        email: [{required: true, message: '请输入公司邮箱', trigger: 'blur'}],
        addr: [{required: true, message: '请输入公司地址', trigger: 'blur'}],
        url: [{required: true, message: '请输入公司网址', trigger: 'blur'}],
        size: [{required: true, message: '请输入公司规模', trigger: 'blur'}],
        type: [{required: true, message: '请输入公司类型', trigger: 'blur'}],
        logo: [{required: true, message: '请输入公司logo', trigger: 'blur'}],
        description: [{required: true, message: '请输入公司简述', trigger: 'blur'}],
        status: [{required: true, message: '请输入公司状态', trigger: 'blur'}],
        created: [{required: true, message: '请输入公司创立时间', trigger: 'blur'}],
      },//表单的校验规则
      defaultProps: {
        children: 'children',
        label: 'name'
      },//默认级联
      treeCheckedKeys: [],
      checkStrictly: true

    }
  },
  created() {
    this.findPage()
  },
  filters: {
    //格式化日期
    formatDateTime(time) {
      if (time == null || time === '') {
        return 'N/A';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  methods: {
    //处理搜索重置
    handleResetSearch() {
      this.pagination = Object.assign({}, defaultPagination);
    },

    //弹出查询公司详情窗口的方法
    handleSeeDetail(row){
      console.info("【====系统正在弹出公司详情窗口====】")
      this.resetForm();
      this.dialogFormVisible4Detail = true;
      findById(row.id).then(res=>{
        this.formData = res.data;
      })
      console.info(`====【系统正在弹出公司详情窗口成功！！并成功获取了ID为：${row.id}的公司详情=====`)
    },
    //处理添加的方法
    handleAdd(formName) {
      console.info("【系统正在进行增加公司....】")
      this.$refs[formName].validate((valid) => {
        if (valid) {
          save(this.formData).then(res=>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                this.handleCurrentChange(1)
              }
            });
            this.dialogFormVisible = false;
          });
        }
      });
      console.info("【======系统增加公司成功！====】")
    },
    //处理删除的方法
    handleDelete(row) {

      console.info("【系统正在进行删除公司....】")
      this.$confirm(`此操作将【永久注销】该${row.name}企业, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCompany(id).then(res=>{
          //弹出成功提示框，显示成功信息
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
              this.handleCurrentChange(1)
            }
          });
        });
        console.info("【系统进行删除公司成功！....】")

      }).catch(() => {
        // 点击取消后调用
        // 空着，防止报错
      });
    },
    //处理表格勾选
    handleSelectionChange(val) {
      //获取用户勾选想赋值数据模型multipleSelection
      this.multipleSelection = val;
      //根据选中数判断批量删除按钮是否激活
      this.delBtnStatus = val.length === 0
    },
    //处理批量删除
    handleDeleteSelected(){
      console.log("【系统正在进行批量删除企业】");
      //定义一个删除ID的数组容器
      const ids = []
      //遍历multipleSelection，取出ID，给到容器
      for (const item of this.multipleSelection) {ids.push(item.id)}
      //发送请求给后端删除
      deleteByBatch(ids).then(res=>{
        //弹出成功提示框，显示成功信息
        this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
          onClose: () => {
            this.handleCurrentChange(1)
          }
        });
        console.log("【系统正在进行批量删除企业成功！！】");
      })
    },
    //重置表单的方法
    resetForm() {
      this.formData = {}
      this.roleFormData = {}
    },
    //关闭新增表单窗口的方法
    handleAddFormClose() {
      this.dialogFormVisible = false
      this.resetForm();
    },
    //关闭详情表单的方法
    handleDetailFormClose(){
      this.dialogFormVisible4Detail = false;
      //设置表单数据模型为空
      this.resetForm();
    },
    //处理公司审核通过的方法
    handleCheckPass(){
      console.log("===系统正在处理公司审核通过===")
      if(this.multipleSelection.length === 1){
        const id = this.multipleSelection[0].id;
        checkPass(id).then(res=>{
          this.handleCurrentChange(1)
          this.$notify({
            title: '成功',
            message: '恭喜你，公司审核成功通过啦！',
            type: 'success',
            duration:1500
          })
        })
        console.log("===系统处理公司审核通过成功！===")
      }else{
        //弹出成功提示框，显示成功信息
        this.$message({
          showClose: true,
          message: '请逐一对注册进行审核！',
          type: 'warning',
          onClose: () => {
            this.handleCurrentChange(1)
          }
        })
      }
    },
    //处理公司审核不通过的方法
    handleCheckRefuse(){
      console.log("===系统正在处理公司审核不通过===")
      if(this.multipleSelection.length === 1){
        const id = this.multipleSelection[0].id;
        checkRefuse(id).then(res=>{
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
              this.handleCurrentChange(1)
            }
          })
        })
        console.log("===系统正在处理公司审核不通过成功！！===")
      }else{
        this.$message({
          showClose: true,
          message: '请逐一对注册进行审核！',
          type: 'warning',
          onClose: () => {
            this.handleCurrentChange(1)
          }
        });
      }
    },
    //改变每页显示的条数
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.findPage()
    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findPage()
    },
    //处理分页查询的方法
    findPage() {
      findByPage(this.pagination).then(res=>{
        console.log("====系统正在进行分页查询公司信息====")
        this.dataList = res.data.rows;
        this.pagination.total = res.data.total;
        console.log("====系统正在进行分页查询公司信息成功！！====")
      })

    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },


  }
}
</script>

<style scoped>

</style>
